<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="goods.css">

</head>

<body>
    <div class="goodsinfo">
        <form action="" class="choose">
            <ul>
                <li class="product">

                    
                    <dl>
                        <dt>颜色：</dt>
                        <dd>
                            <a class="selected" href="javascript:;">黑色 <input type="radio" name="color" value="黑色"
                                    checked="checked"></a>
                            <a href="javascript:;">白色 <input type="radio" name="color" value="白色"></a>
                            <a href="javascript:;">蓝色 <input type="radio" name="color" value="蓝色"></a>
                            <input type="hidden" name="" value="">
                        </dd>
                    </dl>
                </li>

                
            </ul>
        </form>
    </div>
    <script>
        // data 变量表示的是服务端发给我们的商品的sku(货品)信息，根据数据 将可以选择的信息显示在ul标签中，最终显示结果  颜色：白色 黑色  内存：2G 4G 倒推
        var data = [{
                "id": 6,
                "goodsId": 38,
                "goodsSku": {
                    "颜色": "白色",
                    "内存": "2G"
                },
                "goodsCode": "x01",
                "goodsSpec": "",
                "saleNumber": 0,
                "total": 100,
                "shopPrice": "1.00",
                "marketPrice": "10.00",
                "status": 1
            },
            {
                "id": 7,
                "goodsId": 38,
                "goodsSku": {
                    "颜色": "白色",
                    "内存": "4G"
                },
                "goodsCode": "x02",
                "goodsSpec": "",
                "saleNumber": 0,
                "total": 100,
                "shopPrice": "2.00",
                "marketPrice": "9.00",
                "status": 1
            },
            {
                "id": 8,
                "goodsId": 38,
                "goodsSku": {
                    "颜色": "黑色",
                    "内存": "2G"
                },
                "goodsCode": "x03",
                "goodsSpec": "",
                "saleNumber": 0,
                "total": 100,
                "shopPrice": "3.00",
                "marketPrice": "8.00",
                "status": 1
            },
            {
                "id": 9,
                "goodsId": 38,
                "goodsSku": {
                    "颜色": "黑色",
                    "内存": "4G"
                },
                "goodsCode": "x04",
                "goodsSpec": "",
                "saleNumber": 0,
                "total": 100,
                "shopPrice": "4.00",
                "marketPrice": "7.00",
                "status": 1
            }
        ];



        // [
        //     {
        //         name:'颜色',
        //         values:['黑色','白色']
        //     },
        //     {
        //         name:'版本',
        //         values:['I3','I5']
        //     }   
        // ]
        // {
        //     "颜色":['黑色','白色'],
        //     "版本":['I3','I5']
        // }
        var sku = {};
        data.forEach(function (item) {
            var goodsSku = item.goodsSku;
            for(var key in goodsSku){
                console.log(key);
                // 判断sku变量中是否存在当前key 对应的属性名称
                if(sku[key]){
                    // 表示已经存在了这个属性 例如 key 为颜色  判断sku['颜色']
                    sku[key].includes(goodsSku[key]) || sku[key].push(goodsSku[key]);
                }else{
                    sku[key] = [ goodsSku[key] ];
                }
            }
        })
        console.log(sku)

        let html = '';
        for(var key in sku){
            html += `<li class="product">
                    <dl>
                        <dt>${key}:</dt>
                        <dd>`
            sku[key].forEach(function(item,index){
                html += ` <a class="${index ==0 ?'selected':''}" href="javascript:;">${item} <input type="radio" name="color" value="${item}"
                    ${index == 0 ?'checked':''}></a>`
            })            
            html+= `</dd></dl></li>`;
        }
        document.querySelector('ul').innerHTML = html;

        // var arr = [1,2,3];
        // console.log(arr.indexOf(2))
        // includes方法判断元素是否存在 返回值为布尔值
        // console.log(arr.includes(4))
    </script>
</body>

</html>